import { Directive, SimpleChanges, Input, Self, OnChanges, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';

@Directive({
  selector: '[el-container]',
  providers: [NgClass]
})
export class ContainerDirective implements OnChanges, OnInit {
  private ngClass: any;
  @Input() direction: string = '';
  private hostClasses: any;

  constructor(ngClass: NgClass) {
    this.ngClass = ngClass;
  };

  ngOnChanges(changes: SimpleChanges): void {
    this.colletClasses();
  }
  ngOnInit(): void {
    this.colletClasses();
  }

  colletClasses() {
    this.hostClasses = {
      'el-container': true,
      'is-vertical': this.direction === 'vertical',
    };
    this.ngClass.ngClass = this.hostClasses;
    this.ngClass.ngDoCheck();
  }
}
